<template>
  <!-- 树形页面 列表 -->
  <el-table
  :data="treeDatas"
  style="width: 100%;margin-bottom: 20px;"
  :row-key="tableRowKey"
  border
  :default-expand-all="defaultExpandAll"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.name" :label="item.title" :width="item.width" :align="item.align">
      <template slot-scope="scope">
        <span v-if="item.select">
          {{ item.options[scope.row[item.name]] }}
        </span>
        <span v-if="item.name === 'operate' && item.operate && item.operate.length > 0">
          <span v-for="(btn, index) in item.operate" :key="index" :style="btn.customStyle || {}" v-show="!btn.permission || $btnPermission.verify(btn.permission) && (!btn.onShow || btn.onShow(scope.row))">
            <span v-if="!btn.more">
              <span v-if="btn.confirm">
                <el-popconfirm
                :title="btn.message"
                @confirm="btn.fun(scope.row)">
                  <el-button slot="reference" :style="{ color: btn.color}"  :type="btn.type || 'text'" size="small">{{ btn.name }}</el-button>
                </el-popconfirm>
              </span>
              <span v-else>
                <el-button :type="btn.type || 'text'" :style="{ color: btn.color}" size="small" @click="btn.fun(scope.row)">{{ btn.name }}</el-button>
              </span>
            </span>
            <span v-else>
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{ btn.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(dropMenu, index) in btn.more" :key="index" v-show="!dropMenu.permission || $btnPermission.verify(dropMenu.permission)">
                    <el-button  :type="dropMenu.type || 'text'" :style="{ color: dropMenu.color}" size="small" @click="dropMenu.fun(scope.row)">{{ dropMenu.name }}</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </span>
        <span v-if="!item.select && item.name !== 'operate' && (!item.operate || item.operate.length <= 0)">
          {{ scope.row[item.name] }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'TreePage',
  props: {
    treeDatas: {
      type: Array,
      default: ()=> []
    },
    tableRowKey: {
      type: String,
      default: ()=> 'id'
    },
    columns: {
      type: Array,
      default: ()=> []
    },
    defaultExpandAll: {
      type: Boolean,
      default: ()=> true
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table{
  overflow: scroll;
  border: 1px solid #EBEEF5 !important;
  height: calc(100vh - 255px);

  ::v-deep .el-table__empty-block {
    width: 100% !important;
  }

  ::v-deep .el-table__header th{
    background-color: #d9d9d9 !important;
    border: 1px solid #cccccc;
  }

  ::v-deep .el-table__header-wrapper {
    background-color: #d9d9d9 !important;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
}

// 隐藏伪元素（表格多出的横线）
::v-deep.el-table::before {
  display: none !important;
}
</style>